<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .wrap {
            animation: as 1s;
            width: 200px;
            height: 200px;
            background-color: yellow;
            animation-name: as;
            animation-duration: 1s; /* 动画周期时间*/
            animation-iteration-count: 2; /*动画 重复次数   infinite  无限次数*/
            animation-delay: 2s; /* 动画的延迟时间 */
            animation-timing-function: ease-out; /*动画匀速行驶，如果没有 linear 则不是匀速  */
            position: relative;
            /* ease动画以低速开始 然后加快  在结束前变慢
               ease-in 动画以低速开始
               ease-out 动画以低速结束
               ease-in-out 动画以低速开始 和结束 */
            animation-direction: alternate; /* 反复 方向 动画运动方向 */
            animation: as 5s infinite 2s linear alternate;
        }

        @keyframes as {
            0% {
                background-color: green;
                border-radius: 0;
                left: 0;
                top: 0;
            }
            30% {
                background-color: red;
                border-radius: 50%;
                left: 900px;
                top: 0;
                transform: rotate(90deg);
            }
            70% {
                background-color: blue;
                border-radius: 50%;
                left: 900px;
                top: 500px;
                transform: scale(2, 2);
                /*scale（x,y）缩放*/
            }
            80% {
                background-color: pink;
                border-radius: 50%;
                left: 0px;
                top: 500px;
            }
            90% {
                background-color: green;
                border-radius: 0;
                left: 0;
                top: 0;
            }
            100% {
                background-color: violet;
                border-radius: 0;
                left: 900px;
                top: 500px;
            }
        }
    </style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>